<!DOCTYPE html>
<html>
    <head>
        <title>历史记录</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="zh-CN" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta name="format-detection" content="telephone=no"/>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery.min.js"></script>
		<script src="js/echarts.js"></script> 	
		<script src="js/bootstrap.min.js"></script>	
		<style>
			#main , #main div ,canvas{width: 100% !important;}
			.title_top{text-align: center;}
			.rq{padding: 0;}
			.rq a{color: #FFF;}
		</style>
    </head>
	<body>
		<div class="col-xs-12 title_top">
			<div class="col-xs-3 rq back">
				<a href="#">
					<div style="float: left;"><img src="images/icon_left.png"/></div>
					<div style="float: left;margin-top: 2px;">返回</div>
				</a>
			</div>
			<div class="col-xs-6">历史记录</div>
			<div class="col-xs-3" style="padding-right: 0;">
				<div class="shaixuan">	
					<img src="images/icon_shaixuan.png"/> 
					<div class="cat">筛选</div> 
				</div>
			</div>
		</div>
		<div class="lists">
			<div class="col-xs-12 mm">
		    <div class="col-xs-12 hc_main">
		        <div class="col-xs-6 left">
		            PM10
		        </div>
		        <div class="col-xs-6 right">
		            最后更新：今天
		        </div>
		        <div id="pm10">
		        </div>
		    </div>
		</div>
		<div class="col-xs-12 mm">
		    <div class="col-xs-12 hc_main">
		        <div class="col-xs-6 left">
		            PM2.5
		        </div>
		        <div class="col-xs-6 right">
		            最后更新：今天
		        </div>
		        <div id="pm2p5">
		        </div>
		    </div>
		</div>
		<div class="col-xs-12 mm">
		    <div class="col-xs-12 hc_main">
		        <div class="col-xs-6 left">
		            湿度
		        </div>
		        <div class="col-xs-6 right">
		            最后更新：今天
		        </div>
		        <div id="humidity">
		        </div>
		    </div>
		</div>
		<div class="col-xs-12 mm">
		    <div class="col-xs-12 hc_main">
		        <div class="col-xs-6 left">
		            温度
		        </div>
		        <div class="col-xs-6 right">
		            最后更新：今天
		        </div>
		        <div id="temperature">
		        </div>
		    </div>
		</div>
		<div class="col-xs-12 mm">
		    <div class="col-xs-12 hc_main">
		        <div class="col-xs-6 left">
		            风速
		        </div>
		        <div class="col-xs-6 right">
		            最后更新：今天
		        </div>
		        <div id="windSpeed">
		        </div>
		    </div>
		</div>
		<div class="col-xs-12 mm">
		    <div class="col-xs-12 hc_main">
		        <div class="col-xs-6 left">
		            噪声
		        </div>
		        <div class="col-xs-6 right">
		            最后更新：今天
		        </div>
		        <div id="noise">
		        </div>
		    </div>
		</div>
			
		</div>
	</body>
</html>
<script src="js/mui.min.js"></script>
<script src="js/project.config.js"></script>
<script>
	mui(".shaixuan").on("tap",".cat",function(){
		var params = get_ws();
		redirect('en_cat.html',{environmentID:params.environmentID});
	});
	mui.plusReady(function(){
		var token = get_token();
		var params = get_ws();
		var data = {};
		time = params.time ? params.time : 7; 
		data.api = 'environment-get-device-data';
		data.token = token;
		data.environmentID = params.environmentID;
		data.status = 0;
		data.curPage = 1;
		data.pageSize = 100;
		data.justCount = 0;
		data.flag = 3;
		var pm10 = new Array();
		var pm2p5 = new Array();
		var temperature = new Array();
		var humidity = new Array();
		var windSpeed = new Array();
		var noise = new Array();
		var en_param = new Array('pm10','pm2p5','temperature','humidity','windSpeed','noise');
		var day = new Array();
		mui.ajax(project_cofnig.old_time,{
			async:false,
			dataType:'json',
			data:{'type':time},
			success:function(ref){
				mui.each(ref.start,function(i,v){
					day.push(ref.day[i]);
					data.startTime = v;
					data.endTime = ref.end[i];
					mui.ajax(project_cofnig.service_url,{
						async:false,
						dataType:'json',
						data:data,
						success:function(ref){
							pm10.push((ref.data.records[0]['pm10'] != undefined) ?ref.data.records[0]['pm10'] : 0);
							pm2p5.push((ref.data.records[0]['pm2p5'] != undefined) ?ref.data.records[0]['pm2p5'] : 0);
							temperature.push((ref.data.records[0]['temperature'] != undefined) ?ref.data.records[0]['temperature'] : 0);
							humidity.push((ref.data.records[0]['humidity'] != undefined) ?ref.data.records[0]['humidity'] : 0);
							windSpeed.push((ref.data.records[0]['windSpeed'] != undefined) ?ref.data.records[0]['windSpeed'] : 0);
							noise.push((ref.data.records[0]['noise'] != undefined) ?ref.data.records[0]['noise'] : 0);
						}
					});
				});
			}
		});
			for (var i = 0; i < en_param.length; i++) {
				var yValue = new Array();
				switch(en_param[i]){
					case 'pm10':
						yValue = pm10;
						break;
					case 'pm2p5':
						yValue = pm2p5;
						break;
					case 'temperature':
						yValue = temperature;
						break;
					case 'humidity':
						yValue = humidity;
						break;
					case 'windSpeed':
						yValue = windSpeed;
						break;
					case 'noise':
						yValue = noise;
						break;
				}
				var en_chart = document.getElementById(en_param[i]);
				var resizeMainContainer = function () {
					en_chart.style.width = window.innerWidth+'px';
					en_chart.style.height = window.innerHeight-300+'px';
				};
				resizeMainContainer();
				var en_chart = echarts.init(en_chart);
					option = {	tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},
							    xAxis:  {type: 'category',boundaryGap: false,data: day},
								yAxis: {type: 'value',axisLabel: {formatter: '{value} '},axisPointer: {snap: true}},
								visualMap: {show: false,dimension: 0,
								pieces: [{lte: 6,color: 'green'}, {gt: 6,lte: 8,color: 'red'}, {gt: 8,lte: 14,color: 'green'}, {gt: 14,lte: 17,color: 'red'}, {gt: 17,color: 'green'}]},
								series: [{name:'参数',type:'line',smooth: true,data: yValue,}]
							};
				en_chart.setOption(option);
	  	}
	});
	mui(".title_top").on("tap",".back",function(){
		mui.back();
	});
</script> 